<template>
    <div>
        <!-- 属性管理 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
            <el-table-column label="操作">
                <template v-slot="scope">
                    <el-button :disabled="scope.row.disable" class="cursor" @click="handleEdit(scope.$index, scope.row)">
                        <span :style="{ color: scope.row.disable ? '#888' : '#0052D9' }">配置</span>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogVisible" title="Tips" width="700" :before-close="handleClose">
            <div style="border: 1px solid #F00;display: flex;justify-content:flex-end;" @click="addNewElement">新增分类</div>
            <div style="display: flex;">
                <div style="width: 40%;">
                    <div style="padding: 10px;">
                        <div v-for="(item, index) in leftElements" :key="index" :draggable="true"
                            @dragstart="dragStart(index)" style="border: 1px solid #F00;margin-top: 10px;">
                            {{ item }}
                        </div>
                    </div>
                </div>
                <div style="width: 60%;height:100px;border: 1px solid #f00;">
                    <div>
                        <div style="display: flex; ">
                            <div style="width:60%;border: 1px solid #f00;"> <el-input v-model="formInline.user"
                                    placeholder="Approved by" clearable /></div>
                            <div style="width:30%;border: 1px solid #f00; margin-left: 10px;"> <el-select
                                    v-model="formInline.region" placeholder="Activity zone" clearable>
                                    <el-option label="Zone one" value="shanghai" />
                                    <el-option label="Zone two" value="beijing" />
                                </el-select></div>
                        </div>
                        <div>
                            拖拽区域
                        </div>
                    </div>
                </div>
            </div>
            <!-- Existing footer code -->
            <!-- ... existing code ... -->
        </el-dialog>
    </div>
</template>

<script setup>
import { handeQuene } from '@/api/product/demo.js'
import { onMounted, ref } from 'vue'

onMounted(() => {
    handeQuene(6)
})

const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]

const dialogVisible = ref(false)
const formInline = ref({
    user: '',
    region: '',
})

const leftElements = ref(['a', 'b', 'c', 'd', 'e', 'f'])
const rightElements = ref([])

function handleEdit(index, row) {
    console.log(index, row)
    dialogVisible.value = true
}

function addNewElement() {
    leftElements.value.push(`new-${leftElements.value.length + 1}`)
}

let draggedElementIndex = null
function dragStart(index) {
    draggedElementIndex = index
}

function drop() {
    if (draggedElementIndex !== null) {
        rightElements.value.push(leftElements.value[draggedElementIndex])
        leftElements.value.splice(draggedElementIndex, 1)
        draggedElementIndex = null
    }
}

function removeElement(index) {
    leftElements.value.push(rightElements.value[index])
    rightElements.value.splice(index, 1)
}
</script>

<style>
/* Add any additional styles here */
</style>